<template>
	<u-popup v-model="showPopup" mode="bottom" border-radius="20" closeable :mask-close-able="false">
		<view class="u-p-30 font-medium u-font-36 align-center3123">
			<view>请输入服务码</view>
		</view>
		<view class="">
			<u-message-input :maxlength="4" :active-color="config.mainColor" :focus="false" width="90" :value="number"
				@change="change"></u-message-input>
		</view>
		<view class="pay-btn">
			<u-button type="primary" hover-class="none" shape="circle" @click="confirm">确认</u-button>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "bb-pass-code",
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showPopup: false,
				number: '',
				config: this.$appConfig
			};
		},
		watch: {
			value(val) {
				this.showPopup = val
				if (val) {
					this.number = ''
					this.$nextTick(() => {
						this.number = ''
					})
				}
			},
			showPopup(val) {
				this.$emit('input', val)
			}
		},
		methods: {
			confirm() {
				console.log(this.number);
				if (this.number.length >= 4) {
					this.showPopup = false
					this.$emit('confirm', this.number)
				} else {
					this.$u.toast('请输入4位服务码')
				}

			},
			change(e) {
				this.number = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-btn {
		padding: 30rpx 30rpx 60rpx;
	}
</style>